<template>
  <div>
    <el-dialog :visible="dialogVisible" @close="handleClose()" :fullscreen="true">
      <div slot="title">
        <span>{{ transferParams.dialogTitle }}</span>
      </div>
      <el-form :rules="rules" :model="question" ref="question">
        <el-form-item label="考题名" :label-width="formLabelWidth" prop="content">
          <el-input v-model="question.content" autocomplete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="所属题库" :label-width="formLabelWidth" prop="quBankId">
          <el-select v-model="question.quBankId" placeholder="请选择题库" :disabled="disabled">
            <el-option v-for="item in quBank" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考题类型" :label-width="formLabelWidth" prop="quType">
          <el-select v-model="question.quType" placeholder="请选择题型" @change="getQuTypes" :disabled="disabled">
            <el-option v-for="item in quTypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" :label-width="formLabelWidth" prop="levelId">
          <el-select v-model="question.levelId" placeholder="请选择难度" :disabled="disabled">
            <el-option v-for="item in quLevel" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="整题解析" prop="oriPrice" :label-width="formLabelWidth">
          <el-input v-model="question.analysis" :precision="1" :max="999999" type="textarea" heigth="200px"
            :disabled="disabled" />
        </el-form-item>
      </el-form>
      <!-- 单选题 -->
      <div v-if="question.quType == 1">
        <el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd"
          ref="selectLable">
          添加
        </el-button>
        <el-table :data="question.quAnswers" :border="true" style="width: 100%" highlight-current-row
          @current-change="handleCurrentChange">
          <el-table-column type="index" width="120" label="是否答案">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.answerOption">答案</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="选项" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.answerOption" :disabled="disabled" style="text-align: center;"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quAnswerContent" type="textarea" :disabled="disabled" />
            </template>
          </el-table-column>

          <el-table-column label="答案解析">
            <template slot-scope="scope">
              <el-input v-model="scope.row.answerAnalysis" type="textarea" :disabled="disabled" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 多选题 -->
      <div v-if="question.quType == 2">
        <el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd"
          ref="selectLable">
          添加
        </el-button>
        <el-table :data="question.quAnswers" :border="true" style="width: 100%">
          <el-table-column label="是否答案" width="120" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.answerCorrect"
                :checked="scope.row.answerCorrect == 0 ? false : true">答案</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="选项" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.answerOption" :disabled="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quAnswerContent" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="答案解析">
            <template slot-scope="scope">
              <el-input v-model="scope.row.answerAnalysis" type="textarea" @onchange="resize" id="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 判断题 -->
      <div v-if="question.quType == 3">
        <el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd"
          ref="selectLable">
          添加
        </el-button>
        <el-table :data="question.quAnswers" :border="true" style="width: 100%" highlight-current-row
          @current-change="handleCurrentChange">
          <el-table-column type="index" width="120" label="是否答案">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.answerOption">答案</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="选项" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.answerOption" :disabled="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quAnswerContent" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="答案解析">
            <template slot-scope="scope">
              <el-input v-model="scope.row.answerAnalysis" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 简答题 -->
      <div v-if="question.quType == 4">
        <el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd"
          ref="selectLable" :disabled="disabled">
          添加
        </el-button>
        <el-table :data="question.quAnswers" :border="true" style="width: 100%">
          <el-table-column label="是否答案" width="120" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.answerCorrect" :disabled="disabled"
                :checked="scope.row.answerCorrect == 0 ? false : true">答案</el-checkbox>
            </template>
          </el-table-column>

          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="scope.row.quAnswerContent"
                :disabled="disabled">
              </el-input>
            </template>
          </el-table-column>

          <el-table-column label="答案解析">
            <template slot-scope="scope">
              <el-input v-model="scope.row.answerAnalysis" heigth="200px" type="textarea" :disabled="disabled" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="danger" :disabled="disabled" icon="el-icon-delete" circle
                @click="removeItem(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer" v-show="transferParams.buttonFlag">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFrom('question')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { nextTick } from "vue";
import { queryQuInfo, saveQu, updateQu } from '@/api/question/question'
import { queryBankAll, queryQuType, queryQuLevel } from '@/api/common/common'

export default {
  props: {
    dialogParams: {
      type: Object,
      default: {},
    }
  },
  data() {
    return {
      radio: "A",
      transferParams: {},
      quTypes: [],
      quLevel: [],
      selType: 0,
      value: '',
      disabled: true,
      //提交的数据
      question: {
        quId: '',
        content: '',
        quType: '',
        quTypeName: '',
        levelId: '',
        analysis: '',
        answerCorrect: 0,
        quAnswerContent: [],
        answerAnalysis: '',
        quAnswers: [],
        isAnswer: [],
        quBankId: '',
      },
      option: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'],
      //题库数据
      quBank: [],
      formLabelWidth: "120px",
      dialogVisible: false,
      optionIndex: 0,
      rules: {
        content: [
          {
            required: true, message: "请输入题名", trigger: 'blur'
          }
        ],
        quBankId: [
          {
            required: true, message: "请选择题库", trigger: 'blur'
          }
        ],
        levelId: [
          {
            required: true, message: "请选择难度", trigger: 'blur'
          }
        ],
        quType: [
          {
            required: true, message: "请选择考试类型", trigger: 'blur'
          }
        ]
      }
    };
  },
  mounted() {

  },
  created() {
    //获取父子传值
    this.transferParams = this.dialogParams
    this.disabled = this.dialogParams.disabled;
  },
  methods: {
    submitFrom(question) {
      this.$refs[question].validate((valid) => {
        if (valid) {
          if (this.question.quId !== undefined && this.question.quId > 0) {
            this.getFormParams();
            updateQu(JSON.stringify(this.question)).then(res => {
              if (res.code === 200) {
                //关闭表单
                this.handleClose();
              }
            });
          } else {
            this.checkFormParams();
            this.getFormParams();
            saveQu(JSON.stringify(this.question)).then(res => {
              if (res.code === 200) {
                //关闭表单
                this.handleClose();
              }
            });
          }
        } else {
          return false;
        }
      });

    },
    //获取数据详情
    queryQuInfo() {
      queryQuInfo(
        {
          quId: this.transferParams.quId
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            //数据回显
            const result = res.data;
            this.question = result
            if (result.quAnswers === undefined) {
              this.question.quAnswers = [];
            } else {
              this.question.quAnswers = result.quAnswers

            }

          }

        })
    },
    // 添加子项
    handleAdd() {
      //如果是判断题需要做限制
      if (this.question.quType == 3 && this.question.quAnswers !== undefined && this.question.quAnswers.length >= 2) {
        this.$message('判断题只能有2个选项');
        return
      }
      if (this.question.quType == 4 && this.question.quAnswers !== undefined && this.question.quAnswers.length >= 1) {
        this.$message('简答题只能有1个选项');
        return
      }
      this.question.quAnswers.push({
        answerCorrect: 0,
        quAnswerContent: "",
        answerAnalysis: "",
        answerOption: this.option[this.optionIndex]
      });
      this.optionIndex++;
    },
    //删除选项
    removeItem(index) {
      this.question.quAnswers.splice(index, 1);
    },
    //显示弹窗
    show() {
      this.dialogVisible = true;
      //获取题库数据
      this.queryQuBank();
      //获取难度数据
      this.queryQuLevel();
      //获取类型
      this.queryQuType();
      //数据详情
      if (this.transferParams.dialogTitle === '试题详情') {
        this.queryQuInfo();

      } else if (this.transferParams.dialogTitle === '试题编辑') {
        this.queryQuInfo();
        this.disabled = false;
        this.transferParams.buttonFlag = true

      } else if (this.transferParams.dialogTitle === '新增试题') {
        this.disabled = false;
        this.transferParams.buttonFlag = true

      }

    },
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      //清空表单
      this.clearFrom();
      //刷新列表
      this.$parent.queryAll();
    },
    //获取题库下拉框
    queryQuBank() {
      queryBankAll({}).then(res => {
        if (res.code === 200) {
          for (let item of res.data) {
            this.quBank.push({
              value: item.quBankId,
              label: item.quBankName,
            });
          }
        }
      })
    },
    //获取题目难度数据
    queryQuLevel() {
      queryQuLevel({
        groupType: 1,
      }).then(res => {
        if (res.code === 200) {
          for (let item of res.data) {
            this.quLevel.push({
              value: item.setId,
              label: item.setVal,
            });
          }
        }
      })
    },
    //获取题目类型
    queryQuType() {
      queryQuType({
        groupType: 2,
      }).then(res => {
        if (res.code === 200) {
          for (let item of res.data) {
            this.quTypes.push({
              value: item.setType,
              label: item.setVal,
            });
          }
        }
      })
    },
    //下拉框事件
    getQuTypes(value) {
      this.question.quType = value;
      this.question.quAnswers = [];
      this.optionIndex = 0;
      //传递考题类型名称
      if (value == 1) {
        this.question.quTypeName = '单选题';
      } else if (value == 2) {
        this.question.quTypeName = '多选题';
      } else if (value == 3) {
        this.question.quTypeName = '判断题';
      } else if (value == 4) {
        this.question.quTypeName = '简答题';
      }else if (value == 5) {
        this.question.quTypeName = '填空题';
      }


    },

    //校验表单参数
    checkFormParams() {
      if (this.question.quAnswers === undefined && this.question.quAnswers.length <= 0) {
        this.$message("答案不能为空");
      }
    },
    //校验表单参数
    getFormParams() {
      let array = this.question.quAnswers;
      for (let inedx in array) {
        array[inedx].answerCorrect = array[inedx].answerCorrect ? 1 : 0;
      }
    },
    //清空表单
    clearFrom() {
      this.quTypes = [],
        this.quLevel = [],
        this.selType = 0,
        this.value = "",
        this.question.quId = "",
        this.question.content = "",
        this.question.quType = "",
        this.question.levelId = "",
        this.question.analysis = "",
        this.question.answerCorrect = 0,
        this.question.quAnswerContent = [],
        this.question.isAnswer = [],
        this.question.quBankId = "",
        this.quBank = [];
      this.disabled = true;
    },
    resize() {

    },

    //单选
    handleCurrentChange(val) {
      this.radio = val.answerOption;
      for (let i = 0; i < this.question.quAnswers.length; i++) {
        if (this.question.quAnswers[i] === val) {
          this.question.quAnswers[i].answerCorrect = 1;
        } else {
          this.question.quAnswers[i].answerCorrect = 0;
        }
      }
      console.log(this.question.quAnswers)

    }
  },
};
</script>
<style scoped></style>